<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common.jsp"%>

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
	content="An Amaze UI template that helps you build fast, modern mobile web apps.">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>查询缴费</title>

<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="icon" type="image/png" href="i/favicon.png">

<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">

<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192"
	href="i/touch/chrome-touch-icon-192x192.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title"
	content="Amaze UI Sfavicon.pngtarter Kit">
<link rel="apple-touch-icon" href="i/touch/apple-touch-icon.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage"
	content="i/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<style type="text/css">
/* 	ul { */
/*     	margin: 0; */
/* 	} */
	
	.am-list {
	    margin-bottom: 0px;
	    padding-left: 0;
	    border: none;
	}
	
	.am-list>li {
		margin-bottom: 0px;
	}
	
	.am-u-sm-oneOfsix {
		width: 16.666666%;
		padding-left: 0;
		padding-right: 0;
	}
	
	.am-u-sm-fiveOfsix {
		width: 83.333334%;
		padding-left: 0;
		padding-right: 0;
	}
	
	.div-letter {
		border-radius: 1px;
		border: 1px solid #cbcbcb;
		padding: 6px 0;
		margin: 0 0.85rem;
	}
	
	.span_css{
		border-radius: 1px;
		border: 1px solid #cbcbcb;
		padding: 8px 12px;
		margin: 0 2px;
		font-size: 1.6rem;
	}
	.letter_css {
		font-size: 1.6rem;
	}
	
	.li-css {
		text-align: center; 
		background-color: #dbdbdb;
		padding: 0.5rem 0;
	}
	
	.li-div-active {
		border-color: #ec6c2c;
		background-color: #ec6c2c;
		color: #FFF;
	}
	
</style>
</head>
<body class="am-with-fixed-navbar" style="background:url(../static/images/wechat/car_bg.png) top center no-repeat; background-size:cover;" >

	<div data-am-widget="list_news"
		class="am-list-news am-list-news-default" style="margin:0; padding: 20px; text-align: center; background-color: #FFF;">
		<div class="am-list-news-bd" style="padding: 0px; text-align: center;">
			<ul class="am-list" style="text-align: center; background-color: #FFF;">
				<li class="am-g am-list-item-desced" style="padding:0; line-height: 40px; border-radius: 4px; border-right: 1px solid #dddddd">
					<div class="am-u-sm-3" onclick="openWin()"  style="text-align: center; padding-left:0; padding-right:0; border-top-left-radius: 4px;border-bottom-left-radius: 4px; border-left: 1px solid #dddddd; " align="right">
						<span id="provice">粤</span><span id="letter">B</span>
						<img src="<%=basePath%>static/images/wechat/down_arrow.png" style="width: 1em;"/>
					</div>
					<div class="am-u-sm-9" style="padding-left:0; padding-right:0; border-top-right-radius: 4px;border-bottom-right-radius: 4px; ">
			      	  	<input id="num" value="" placeholder="车牌号" type="text" style=" padding-top:1rem; float: left;background-color: #FFF; border-radius: 0; border:none; padding-left:2px;"/>
					</div>
				</li>
				
				<li class="am-g am-list-item-desced" style="border: none; text-align: center;" align="center">
					<button id="payBtn" onclick="queryFee()" type="button" class="am-btn am-btn-primary am-btn-block am-round" style="background-color: #ffb932;color: #fff; border-color: #ffb932; border-radius: 4px; ">查询停车订单</button>
				</li>
			</ul>
		</div>
	</div>

	<div class="am-share am-modal-actions" id="choose_pay_type" style="display: none;">
		<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="border: none; margin: 0;">
		  <div class="am-list-news-bd">
		    <ul id="proviceList" class="am-list" style=" border:none;">
		      <li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 1rem 1em;  padding-top: 1.5em; border:none;">
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-left: 0;">京</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">津</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">冀</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">蒙</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">辽</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-right: 0;">鲁</span></div>
			</li>
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 1rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-left: 0;">晋</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">吉</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">苏</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">皖</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">豫</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-right: 0;">陕</span></div>
			</li>
			
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 1rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-left: 0;">黑</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">沪</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">浙</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">赣</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">鄂</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-right: 0;">湘</span></div>
			</li>
			
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 1rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-left: 0;">渝</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">川</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">甘</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">宁</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css li-div-active">闽</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-right: 0;">粤</span></div>
			</li>
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 1rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-left: 0;">桂</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">贵</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">云</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">藏</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css">青</span></div>
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-right: 0;">新</span></div>
			</li>
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 1rem 1em; padding-bottom: 1.5em; border:none;">
				<div class="am-u-sm-oneOfsix"><span class="span_css" style="margin-left: 0;">琼</span></div>
			</li>
		    </ul>
		    
		    <ul id="letterList" class="am-list" style=" border:none; display: none;">
		      <li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 0.5rem 1em; padding-top: 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-left: 0;">A</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">B</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">C</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter li-div-active"><span class="letter_css">D</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">E</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-right: 0;">F</span></div></div>
			</li>
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 0.5rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-left: 0;">G</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">H</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">I</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">J</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">K</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-right: 0;">L</span></div></div>
			</li>
			
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 0.5rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-left: 0;">M</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">N</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">O</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">P</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">Q</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-right: 0;">R</span></div></div>
			</li>
			
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 0.5rem 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-left: 0;">S</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">T</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">U</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">V</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css">W</span></div></div>
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-right: 0;">X</span></div></div>
			</li>
			<li class="am-g am-list-item-desced li-css" style="text-align: center; padding: 0.5rem 1em; padding-bottom: 1em; border:none;">
				<div class="am-u-sm-oneOfsix"><div class="div-letter"><span class="letter_css" style="margin-left: 0;">Y</span></div></div>
				<div class="am-u-sm-oneOfsix" style="float: left;"><div class="div-letter"><span class="letter_css" >Z</span></div></div>
			</li>
		    </ul>
		  </div>
		</div>
	</div>
	<div class="am-dimmer" data-am-dimmer="" style="display: none;"></div>
	
	
	<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
	  <div class="am-modal-dialog">
	    <div id="my-text" class="am-modal-bd">
	      Hello world！
	    </div>
	    <div class="am-modal-footer">
	      <span class="am-modal-btn">确定</span>
	    </div>
	  </div>
	</div>
	
	<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
	  <div class="am-modal-dialog">
	    <div class="am-modal-bd">
	      	你确定要解除该车牌绑定吗？
	    </div>
	    <div class="am-modal-footer">
	      <span class="am-modal-btn" data-am-modal-cancel style="color: #666666">取消</span>
	      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
	    </div>
	  </div>
	</div>
	
	<script>
	
		var ecode = '${ecode}';
	
		$(function() {
			addEvent();
		});
		
		function addEvent() {
			$("#proviceList").children().children().children().click(function(){
				var provice = $(this).text();
				$("#provice").text(provice);
				if($(this).hasClass("li-div-active"))
				{
					nextStep();
				} else {
					$(this).parent().parent().parent().children().children().children().removeClass("li-div-active");
					$(this).addClass("li-div-active");
					nextStep();
				}
			})
			
			$("#letterList").children().children().children().click(function(){
				var letter =  $(this).text();
				$("#letter").text(letter);
				if($(this).hasClass("li-div-active"))
				{
					closeWin();
				} else {
					$(this).parent().parent().parent().children().children().children().removeClass("li-div-active");
					$(this).addClass("li-div-active");
					closeWin();
				}
			})
		}
	
		
		function queryFee()
		{
			var provice = $("#provice").text();
			var letter = $("#letter").text();
			var num = $("#num").val();
			if(null == num || undefined == num || "" == num) {
				alertText("请输入车牌号码");
				return;
			}
			var plateNumber = provice + letter + num;
			var url = "<%=basePath%>/wechat/pay?plateNumber="+plateNumber+"&ecode="+ecode;
			window.location.href = url;
		}
		
		function nextStep() {
			$("#proviceList").css("display", "none");
			$("#letterList").css("display", "block");
		}
		
		function openWin() {
			
			$("#proviceList").css("display", "block");
			$("#letterList").css("display", "none");
			
			$('body').addClass("am-dimmer-active");
			$('#choose_pay_type').css('display', 'block');
			$('#choose_pay_type').removeClass('am-modal-out');
			$('#choose_pay_type').addClass('am-modal-active');
			$(".am-dimmer").addClass('am-active');
			$(".am-dimmer").css('display', 'block');
		}
		
		function closeWin() {
			$('body').removeClass("am-dimmer-active");
			$('#choose_pay_type').css('display', 'none');
			$('#choose_pay_type').removeClass('am-modal-active');
			$('#choose_pay_type').addClass('am-modal-out');
			$(".am-dimmer").css('display', 'none');
			$(".am-dimmer").removeClass('am-active');
		}
	</script>

	<!-- Built with love using Web Starter Kit -->
</body>

</html>